<template>
  <div class="team-management-page">
    <div class="page-header">
      <h2>张云亮团队明细表</h2>
      <el-button type="text" @click="handleReturn">返回</el-button>
    </div>

    <el-table
      :data="teamList"
      border
      stripe
      style="width: 100%; margin-top: 20px;"
      :header-cell-style="{ backgroundColor: '#f5f7fa', fontWeight: 'bold' }"
    >
      <el-table-column prop="time" label="时间" align="center"   />
      <el-table-column prop="name" label="姓名" align="center" />
      <el-table-column prop="position" label="职位" align="center"  />
      <el-table-column prop="brand" label="负责品牌" align="center"   />
      <el-table-column prop="cumulativePayment" label="累计回款" align="center"   />
      <el-table-column prop="cumulativeShipments" label="累计出货" align="center" />
      <el-table-column prop="paymentTask" label="回款任务" align="center"   />
      <el-table-column prop="completionProgress" label="完成进度" align="center"  />
      <el-table-column prop="actualCompletion" label="实际完成额" align="center"  />
      <el-table-column prop="monthlyPerformance" label="当月绩效" align="center"  />
      <el-table-column label="操作" align="center" width="160">
        <template #default="scope">
          <el-button 
            type="primary" 
            plain 
            size="small"
            @click="openDetailDialog(scope.row)"
          >
            查看工作日报
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      v-model="dialogVisible"
      :title="`${currentDetail.name}明细`"
      width="80%"
    >
      <el-table
        :data="currentDetail.dailyList"
        border
        stripe
        style="width: 100%;"
        :header-cell-style="{ backgroundColor: '#f5f7fa', fontWeight: 'bold' }"
      >
        <el-table-column prop="date" label="时间" align="center"  />
        <el-table-column prop="brand" label="负责品牌" align="center"  />
        <el-table-column prop="cumulativePayment" label="累计回款" align="center"  />
        <el-table-column prop="cumulativeShipments" label="累计出货" align="center" />
        <el-table-column prop="paymentTask" label="回款任务" align="center" />
        <el-table-column prop="completionProgress" label="完成进度" align="center"  />
        <el-table-column prop="actualCompletion" label="实际完成额" align="center"  />
        <el-table-column prop="monthlyPerformance" label="当月绩效" align="center"  />
      </el-table>
      <template #footer>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const teamList = ref([
  {
    id: 1,
    time: '2024.1',
    name: '张三',
    position: '宣传经理',
    brand: 'guiCi',
    cumulativePayment: '¥400000',
    cumulativeShipments: '¥500',
    paymentTask: '¥400000',
    completionProgress: '20%',
    actualCompletion: '¥4000',
    monthlyPerformance: '¥400',
    dailyList: [
      { date: '1.1', brand: 'guiCi', cumulativePayment: '¥400000', cumulativeShipments: '¥500', paymentTask: '¥400000', completionProgress: '20%', actualCompletion: '¥4000', monthlyPerformance: '¥400' },
      { date: '1.2', brand: 'guiCi', cumulativePayment: '¥400000', cumulativeShipments: '¥500', paymentTask: '¥400000', completionProgress: '20%', actualCompletion: '¥4000', monthlyPerformance: '¥400' },
      { date: '1.3', brand: 'guiCi', cumulativePayment: '¥400000', cumulativeShipments: '¥500', paymentTask: '¥400000', completionProgress: '20%', actualCompletion: '¥4000', monthlyPerformance: '¥400' }
    ]
  },
  {
    id: 2,
    time: '2024.1',
    name: '李四',
    position: '宣传组长',
    brand: 'guiCi',
    cumulativePayment: '¥400000',
    cumulativeShipments: '¥500',
    paymentTask: '¥400000',
    completionProgress: '20%',
    actualCompletion: '¥4000',
    monthlyPerformance: '¥400',
    dailyList: []
  },
  {
    id: 3,
    time: '2024.1',
    name: '王五',
    position: '宣传组员',
    brand: 'guiCi',
    cumulativePayment: '¥400000',
    cumulativeShipments: '¥500',
    paymentTask: '¥400000',
    completionProgress: '20%',
    actualCompletion: '¥4000',
    monthlyPerformance: '¥400',
    dailyList: []
  }
]);

const dialogVisible = ref(false);
const currentDetail = ref({});

const openDetailDialog = (row) => {
  currentDetail.value = { ...row };
  dialogVisible.value = true;
};

const handleReturn = () => {
  console.log('返回操作');
    router.back();
};
</script>

<style scoped>
.team-management-page {
  padding: 20px;
  background-color: #fff;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
}
</style>